<template>
  <div class="custom_modal">
    <el-dialog
      top="8vh"
      v-model="dialogVisible"
      :title="title"
      :width="width"
      :show-close="false"
      :before-close="handleClose"
      :align-center="dialogCenter"
    >
      <template #header>
        <div class="header-wrap d-flex a-center j-center">
          <span class="header-title">{{ title }}</span>
          <div
            class="close_icon-box d-flex a-center j-center"
            @click="onCancel"
          >
            <el-icon class="close_icon"><CloseBold /></el-icon>
          </div>
        </div>
      </template>
      <template #default>
        <div class="dialog-content"><slot></slot></div>
      </template>
      <template #footer>
        <div class="d-flex a-center j-center dialog-footer" v-if="footerButton">
          <el-button class="button_cancel2" @click="onCancel">取消</el-button>
          <el-button
            :disabled="confirmDisabled"
            color="#FC7018"
            style="color: #ffffff"
            @click="onConfirm"
            >{{ confirmButtonTitle }}</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { ElDialog, ElLoading } from "element-plus";
import { CloseBold } from "@element-plus/icons-vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "提示",
  },
  width: {
    type: String,
    default: "40%",
  },
  confirmButtonTitle: {
    type: String,
    default: "保存",
  },
  footerButton: {
    type: Boolean,
    default: true,
  },
  confirmDisabled: {
    type: Boolean,
    default: false,
  },
  dialogCenter: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits([
  "update:visible",
  "update:confirmDisabled",
  "onConfirm",
  "open",
]);
const dialogVisible = ref(props.visible);

const handleClose = () => {
  emits("update:visible", false);
  emits("update:confirmDisabled", false);
};

const onCancel = () => {
  dialogVisible.value = false;
};

const onConfirm = () => {
  emits("onConfirm");
};

// 监听visible的变化 只能监听第一次的变化
watch(
  () => props.visible,
  (value) => {
    dialogVisible.value = value;
  }
);

// 监听组件内部的dialogVisible变化
watch(
  () => dialogVisible.value,
  (value) => {
    emits("update:visible", value);
  }
);

// 暴露方法出去
defineExpose({ onConfirm });
</script>

<style lang="scss" scoped>
:deep(.el-overlay-dialog) {
  height: 100vh;
}
:deep(.el-dialog) {
  max-height: 95vh;
  padding: 0 !important;
  margin: 0 !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .el-dialog__header {
    padding: 0 !important;
    margin-right: 0 !important;
  }
  .el-dialog__footer {
    padding: 0;
  }
  .dialog-content {
    padding: 20px;
    position: relative;
    overflow: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .dialog-footer {
    padding: 10px 0;
    box-sizing: border-box;
    height: 80px;
  }

  .header-wrap {
    position: relative;
    width: 100%;
    background-color: #f7f7fa;
    height: 50px;
    .header-title {
      font-size: 16px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #1a1a1a;
    }
    span {
      font-size: 16px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #1a1a1a;
    }

    .close_icon-box {
      width: 24px;
      height: 24px;
      border: 1px solid #353535;
      border-radius: 50%;
      cursor: pointer;
      position: absolute;
      right: 20px;
      .close_icon {
        font-size: 16px;
      }
    }
  }
}
</style>
